<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div :style="{ height: heightValue, borderColor: module.data.borderColor, backgroundColor: module.data.inputColor }"
        :class="'search-bar ' + module.data.styleName" v-cloak>
        <div class="body">
            <div class="icon">
                <img class="search-icon" :src="module.data.searchIcon" />
            </div>
            <div class="placeholder" :style="{ color: textColor }">{{ text }}</div>
        </div>
        <div v-if="module.data.showMap == true || module.data.showMap == 'true'" class="footer"><img class="map-icon"
                :src="module.data.mapIcon" /> 地图找房</div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
        };
    },
    props: {
        module: { type: Object },
    },

    mounted: function () { },

    computed: {
        heightValue: function () {
            if (!this.module.height) {
                return '80px'
            }
            return this.module.height.value + "px";
        },


        text: function () {
            return this.module.data.text.value;
        },
        textColor: function () {
            return this.module.data.text.color;
        },

        // borderColor: function () {
        //     var color = this.module.data.color || "#f9f9f9";
        //     return color;
        // },

        // bgColor: function () {
        //     var color = this.module.color || "#f9f9f9";
        //     var yes = [0, 3].includes(this.module.style);
        //     if (yes) {
        //         return color;
        //     }
        //     return "rgba(0,0,0,0)";
        // },
    },

    methods: {},
};
</script>

<style scoped lang="scss">
.search-bar {
    transition: all 0.5s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    min-height: 80px;
    max-height: 120px;
    margin: 20px 20px;
    padding: 20px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 2px solid #cecece;
}

.search-bar .body {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.search-bar.round {
    border-radius: 100px;
}

.search-bar .footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.search-bar .placeholder {
    color: #999999;
    font-size: 24px;
}

.search-bar .footer {
    transition: all 0.5s;
    color: #333;
    font-size: 24px;
    text-align: right;
    margin-left: 2px solid #f4f4f4;
    padding-left: 20px;
    padding-right: 20px;
}

.search-bar .icon img {
    width: 36px;
    height: 36px;
    margin-right: 20px;
}

.search-bar .map-icon {
    width: 36px;
    height: 36px;
    margin-right: 8px;
}
</style>
